<template>
	<s-layout class="set-wrap" :title="'分享详情'" :bgStyle="{ color: '#FFF' }" :onShareAppMessage="state.shareInfo" :onShareTimeline="state.shareInfo">
		<view class="title ss-m-x-30 border-bottom ss-p-b-30 ss-m-t-30">
			{{state.title}}
		</view>
		<view class="" v-if="!state.content||state.content==''">
			<view class="logo ss-m-x-30 ss-p-b-30 ss-p-t-30">
				<image :src="sheep.$url.cdn(state.image)" mode=""></image>
			</view>
			<view class="des">
				{{state.blurb}}
			</view>
		</view>

		<view class="ss-p-30"><mp-html class="richtext" :content="state.content"></mp-html></view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import sheep from '@/sheep';

	const state = reactive({
		title: '',
		content: '',
		image: '',
		shareInfo: {},
		
	});
	
	async function getDetails(id) {
		let {
			data,
			code
		} = await sheep.$api.commission.informationDetail({
			id,
		});
		if (code === 1) {
			state.content = data.content;
			state.title = data.name;
			state.image = data.image;
			state.blurb = data.blurb;
		}
	}
	onLoad((options) => {
		getDetails(options.id);
		state.shareInfo.path = `/pages/user/wallet/shareDetails?id=${options.id}`
	});
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		font-size: 40rpx;
		margin:20rpx auto;
		font-weight: 600;
	}

	.logo {
		text-align: center;

		.image {
			width: 680rpx;
			height: 340rpx;
		}
	}

	.des {
		width: 90%;
		margin: 0 auto;
	}

	.richtext {}
</style>